<template>
  <view class="scrollbox">
    <u-navbar title="统计详情"> </u-navbar>
    <getdatascrollview ref="getdatascrollview" :api="getdata" :seardata="tablequery">
      <template #default="{ list }">
        <view class="searchcontent">
          <dateitem style="flex: 1;" v-model="searchdata.startDate" :btnfalg="true" @change="change">
          </dateitem>
          <!-- <deptSelect v-model="searchdata.deptId" @change="change"></deptSelect> -->
        </view>
        <view class="znum">
          共计收入:<text class="text">¥{{ jez }}</text>
        </view>
        <item v-for="item in list" :item="item"> </item>
      </template>
    </getdatascrollview>
  </view>
</template>

<script>
import { slotpage } from "@/api/appletManage/advertising";
import { getEnum } from "@/api/appletManage/advertising";
import item from "./components/item.vue";
export default {
  components: { item },
  data() {
    return {
      api: slotpage,
      appletIdOption: [],
      customstyle: {
        margin: 0,
        flex: 0,
      },
      jez: 0,
      tablequery: {},

      searchdata: {},
      searchinputs: [],
      query: {},
      list: [],
    };
  },
  onLoad(query) {
    this.query = query;
    this.init();
  },
  onShow() {
    this.$refs.getdatascrollview && this.$refs.getdatascrollview.onRefresh();
  },
  methods: {
    async getdata(reqdata) {
      let data = await slotpage(reqdata);
      this.list = data.data.records;
      // appletName
      if (this.list.length != 0) {
        uni.setNavigationBarTitle({
          title: this.list[0].appletName,
        });
      }
      this.jez = 0;
      this.list.forEach((e) => {
        this.jez = this.jez + Number(e.income);
      });
      this.jez = this.jez.toFixed(2);
      return data;
    },
    async init() {
      this.searchdata = {
        ...this.query,
        startDate: this.$u.timeFormat(),
        endDate: this.$u.timeFormat(),
      };
      this.tablequery = {
        ...this.query,
        startDate: this.$u.timeFormat(),
        endDate: this.$u.timeFormat(),
      };
    },
    change() {
      this.searchdata.endDate = this.searchdata.startDate;
      this.onsearch();
    },
    sxfn() {
      this.$refs.sxpopup.open(this.searchinputs).then((data) => {
        this.searchdata = {
          ...this.searchdata,
          ...data,
        };
        this.onsearch();
      });
    },
    async onsearch() {
      this.tablequery = {
        ...this.searchdata,
      };

      this.$nextTick(() => {
        this.$refs.getdatascrollview.onRefresh();
      });
    },
  },
};
</script>
<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
.edtbtn {
  color: #1890ff;
  font-size: 28rpx;
}

.znum {
  padding: 20rpx;
  font-size: 28rpx;

  .text {
    color: #32ae57;
    font-weight: bold;
  }
}

.searchcontent {
  display: flex;
  align-items: center;
  padding: 20rpx 20rpx 0 20rpx;

  .sx {
    padding-left: 20rpx;
    display: flex;
    font-size: 28rpx;
  }
}
</style>
